<template>
  <div class="mod-prod-brand">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" size="small">
        <div class="input-row">
          <!--          <el-input v-model="input" placeholder="请输入内容"  style="width:21%;"  size="small"></el-input>-->
          <!--          <el-button size="mini" icon="el-icon-search" class="filter-item" @click="getDataList()" style=" margin-top:4px; margin-left:20px;">{{ $t('nftgas.gasSearch') }}</el-button>-->
          <el-button size="mini" icon="el-icon-plus" type="primary" class="filter-item" @click="addOrUpdateHandle()"
                     style=" margin-top:4px;">{{$t('versionDeloy.versionCreate')}}
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con spec-table">
        <el-table
          ref="specListTable"
          :data="dataValue"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          style="width: 100%">
          <el-table-column
            prop="name"
            :label="$t('versionDeloy.name')"
          >
          </el-table-column>

          <el-table-column :label="$t('versionDeloy.type')" prop="type" >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type==1" type="info">{{$t('versionDeloy.android')}}</el-tag>
              <el-tag v-if="scope.row.type==2" type="info">{{$t('versionDeloy.ios')}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="detail"
            :label="$t('versionDeloy.detail')"
          >
            <template slot-scope="scope">
              <div v-html="scope.row.detail" style="height:100px"></div>
            </template>
          </el-table-column>

          <el-table-column
            prop="version"
            :label="$t('versionDeloy.version')"
          >
          </el-table-column>

          <el-table-column
            prop="wgt"
            :label="$t('versionDeloy.wgt')"
          >
          </el-table-column>
          <el-table-column
            prop="creatTime"
            :label="$t('versionDeloy.creatTime')"
          >
          </el-table-column>
<!--          <el-table-column :label="$t('publics.operating')" align="center" width="230"-->
<!--                             class-name="small-padding fixed-width">-->
<!--              <template slot-scope="{row}">-->
<!--                <el-button type="text" @click="addOrUpdateHandle(row.id)">-->
<!--                  {{ $t('nftgas.edit') }}-->
<!--                </el-button>-->
<!--                <el-button type="text" @click="deleteHandle(row.id)">-->
<!--                  {{ $t('nftgas.delete')}}-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
        </el-table>
      </div>
      <el-pagination
        v-if="dataValue.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="refreshChange"></add-or-update>

    </div>
  </div>
</template>

<script>

  import AddOrUpdate from './add-or-update.vue'

  export default {
    data () {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataValue: [],
        groupId: null,
        itemVal: {}, // 获取当前列数据
        // 修改
        page: {
          pageSize: 10,
          pageNum: 1,
          total: null
        },
        updateStatusParam: {
          id: '',
          status: ''
        },
        pageLoading: true,
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    created () {
      this.getDataList()
    },
    methods: {

      // 获取数据列表
      getDataList (page, newData = false) {
        this.$http({
          url: this.$http.adornUrl('/version/getList'),
          method: 'get',
          params: this.page
        }).then((data) => {
          this.dataValue = data.data.list
          this.page.total = data.data.total
          console.log('列表', data)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      deleteHandle (roleId) {
        this.$confirm(this.$t('nftgas.deletenftinfo'), this.$t('nftgas.delete'), {
          confirmButtonText: this.$t('webInfoConfig.determine'),
          cancelButtonText: this.$t('webInfoConfig.cancellation'),
          type: 'warning'
        }).then(() => this.deleteById(roleId))
      },
      deleteById (roleId) {
        this.$http({
          url: this.$http.adornUrl('/admin/nftgas/delete'),
          method: 'get',
          params: this.$http.adornParams({
            id: roleId
          })
        }).then((data) => {
          this.$message({
            message: this.$i18n.t('sys.successful'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      },
      // changSwitch(roleId){
      //   this.updateStatusParam.id = data.id
      //   this.updateStatusParam.status = data.status
      //   this.$http({
      //     url: this.$http.adornUrl('/admin/nftgas/updatestatus'),
      //     method: get,
      //     data: this.$http.adornData({id :this.updateStatusParam.id,status:this.updateStatusParam.status})
      //   }).then(({ data }) => {
      //     this.$message({
      //       message: this.$i18n.t('remindPop.succeeded'),
      //       type: 'success',
      //       duration: 1500,
      //       onClose: () => {
      //         this.visible = false
      //         this.isSubmit = false
      //         this.$emit('refreshDataList')
      //       }
      //     })
      //   })
      // },
      // 状态
      changSwitch (data) {
        this.$http({
          url: this.$http.adornUrl('/admin/nftgas/updatestatus'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                status: data.status,
                id: data.id
              },
              {userId: this.userId}
            )
          )
        }).then(({data}) => {
          if (data === null) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
          }
          setTimeout(() => {
            location.reload()
          }, 800)
        })
      },
      // 重置
      resetSearchForm () {
        this.page.groupName = ''
        this.getDataList()
      },

      // 分页
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDataList()
      },
      handleCurrentChange (val) {
        this.page.pageNum = val
        this.getDataList()
      },
      /**
       * 刷新回调
       */
      refreshChange () {
        this.getDataList(this.page)
      },
      searchChange () {
        this.getDataList(this.page)
      }
    }
  }
</script>
